<template>
	<view class="content">
		<view class="top">
			<view class="toWork" @click="show = true">
				<text>{{ atWork }}</text>
				<image src="../../static/xiala1.png" mode=""></image>
			</view>
			<view class="identity" @click="show1 = true">
				<text>{{ identity }}</text>
				<image src="../../static/xiala1.png" mode=""></image>
			</view>
		</view>

		<view v-for="(i, index) in data" :key="index">
			<view class="list">
				<view class="box">
					<view class="left"><image :src="i.avatar" mode=""></image></view>
					<view class="right">
						<view class="name">
							<text class="info">{{ i.user_nickname }}</text>
							<text class="info1">
								{{ i.dispatch_status == 0 ? '等待派单' : i.dispatch_status == 1 ? '上班中' : i.dispatch_status == 2 ? '请假中' : '' }}
							</text>
						</view>
						<view class="identity">身份：{{ i.is_monthmom === 1 ? '普通月嫂 ' : '育儿嫂' }}</view>
						<view class="phn">电话：{{ i.mobile }}</view>
						<view class="amt">
							<text class="info">当前订单金额：</text>
							<text class="info1">￥ {{ i.all_price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="isItEmpty"><u-empty text="月嫂类型" mode="list"></u-empty></view>

		<u-select v-model="show" :list="list" @confirm="confirm" safe-area-inset-bottom></u-select>
		<u-select v-model="show1" :list="list1" mode="mutil-column-auto" safe-area-inset-bottom @confirm="confirm1"></u-select>
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			atWork: '全部',
			identity: '身份',
			page: 0, // type
			pagesize: 10, // 每页显示条数
			status: 0, //1正在上班 2请假中3等待派单 0 全部
			type: 0, // 1普通月嫂 2育儿嫂 0 全部
			data: [], // 月嫂数据
			isItEmpty: false,
			show: false,
			show1: false,
			list: [
				{
					value: '0',
					label: '全部',
				},
				{
					value: '1',
					label: '正在上班',
				},
				{
					value: '2',
					label: '请假中',
				},
				{
					value: '3',
					label: '等待派单',
				},
			],
			list1: [
				{
					value: '1',
					label: '普通月嫂',
				},
				{
					value: '2',
					label: '育儿嫂',
				},
			],
		};
	},
	methods: {
		// 排序1
		confirm(e) {
			console.log('e :>> ', e);
			this.status = e[0].value;
			this.atWork = e[0].label;
			this.confinementManagement();
		},
		// 排序2
		confirm1(e) {
			console.log('e 11:>> ', e);
			this.type = e[0].value;
			this.identity = e[0].label;
			this.confinementManagement();
		},

		//月嫂管理
		async confinementManagement() {
			console.log(' this.status :>> ', this.status);
			console.log('this.type :>> ', this.type);
			const res = await this.$u.post(
				'/api/User/ys_manage',
				{
					page: this.page,
					pagesize: this.pagesize,
					status: this.status,
					type: this.type,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('res :>> ', res);

			if (res.code === 0) {
				this.isItEmpty = true;
				this.data = [];
				return;
			} else {
				this.isItEmpty = false;
			}
			this.data = res.data;

			console.log('this.data :>> ', this.data);
		},
	},
	onLoad() {
		try {
			const token = uni.getStorageSync('token');

			if (token) {
				console.log('token :>> ', token);
				//this.token = token;
				this.confinementManagement();
			} else {
				uni.reLaunch({
					url: '../login/login',
				});
			}
		} catch (e) {}
	},
};
</script>

<style lang="scss">
.u-empty {
	margin-top: 50% !important;
}
.content {
	/deep/.u-select__body {
		height: 370rpx !important;
	}
	padding: 32rpx 29rpx;
	// background-color: #f8f8f8;
	.top {
		display: flex;
		.toWork,
		.identity {
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-right: 15rpx;
			}
			image {
				width: 27rpx;
				height: 15rpx;
				margin-right: 29rpx;
				// background: #999999;
			}
		}
	}
	.list {
		width: 690rpx;
		// height: 252rpx;
		padding: 30rpx 0;

		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 18rpx;

		.time {
			height: 51rpx;
			line-height: 51rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			border-bottom: 2rpx solid #f2f2f2;
			padding-left: 20rpx;
		}
		.box {
			display: flex;
			// padding-top: 20rpx;
			padding-left: 30rpx;

			.left {
				width: 150rpx;
				height: 150rpx;
				margin-right: 21rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				.name {
					width: 491rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					.info1 {
						width: 101rpx;
						display: inline-block;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						background: #fdebe0;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #5a1524;
					}
				}
				.identity {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-top: 3rpx;
				}
				.phn {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-top: 3rpx;
				}
				.amt {
					margin-top: 10rpx;
					.info,
					.info1 {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
					.info1 {
						color: #ff0000;
					}
				}
			}
		}
	}
}
</style>
